<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <base href="../resources/" /> 
  <title>列表</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css" /> 
  <link rel="stylesheet" type="text/css" href="js/easyui/themes/gray/easyui.css" /> 
  <link rel="stylesheet" type="text/css" href="css/jquery.flex-images.css" /> 
  <link rel="stylesheet" type="text/css" href="css/icon/font-awesome.min.css" /> 
  <link rel="stylesheet" type="text/css" href="css/upload/webuploader.css" /> 
  <link rel="stylesheet" type="text/css" href="css/upload/style.css" /> 
  <link rel="stylesheet" type="text/css" href="css/web.css" /> 
  <script type="text/javascript" src="js/jquery.min.js"></script> 
  <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script> 
  <script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script> 
  <script type="text/javascript" src="js/easyui/extend.easyui.js"></script> 
  <script type="text/javascript" src="js/jquery.flex-images.min.js"></script> 
  <script type="text/javascript">
  $(function() {
	  $('#main_table').datagrid({
	    method: 'post',
	    url: '../getUsers',
	    toolbar: '#seach',
	    pagination: true,
	    fit: true,
	    fitColumns: true,
	    border: false,
	    rownumbers: true,
	    singleSelect: true,
	    columns:[[
		  			{field:'userid',title:'主键id',width:50},
		  			{field:'nickname',title:'用户昵称',width:50},
		  			{field:'username',title:'用户名称',width:50},
		  			{field:'name',title:'姓名',width:50},
		  			{field:'gender',title:'性别',width:50},
		  			{field:'telephone',title:'电话',width:50},
		  			{field:'mobile',title:'手机',width:50},
		  			{field:'orgcode',title:'组织编号',width:50},
		  			{field:'email',title:'邮箱',width:50},
		  			{field:'photo',title:'头像',width:50},
		  			{field:'position',title:'职位',width:50},
		  			{field:'location',title:'工位',width:50},
		  			{field:'number',title:'工号',width:50},
		  			{field:'remarks',title:'备注信息',width:70}
		  		]]
	  });
	});
	function query() {
	  $('#main_table').datagrid('load', {
		  username: $('#username').textbox('getValue')
	  });
	}
	function clear() {
	  $('#username').textbox('clear');
	}
	
</script> 
 </head>
<body class="easyui-layout" id="layout">
	<div id="west"
		data-options="region:'west',collapsible:false,split:false">
		<!-- 搜索栏 -->
		<div id="seach">
			<label>用户名:</label> 
		    <input id="username" class="easyui-textbox" style="width: 120px;" /> 
		    <a href="javascript:query()" class="easyui-linkbutton"><i class="fa fa-search"></i> 搜索</a> 
		    <a href="javascript:clear()" class="easyui-linkbutton"><i class="fa fa-ban"></i> 清除</a> 
		</div>
		<!-- 内容表格 -->
		<table id="main_table"></table>
	</div>
</body>
</html>
